import React, { Fragment } from 'react'
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Linking,
  Platform
} from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleS, ONE_PIXEL, ScaleT, WIDTH } from 'src/utils/ScreenUtil'
import HTMLView from 'react-native-htmlview'
import AutoSizedImage from './AutoSizedImage'
import { productLook } from 'src/utils/RequestAPI'
import { getUserAvatorLocalCByGender, getUserAvatorLocalB } from 'src/utils/ConfigUtil'
function renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name == 'img') {
    return (
      <AutoSizedImage
        key={index}
        source={{ uri: node.attribs.src }}
        style={{ width: WIDTH - 40, height: 0 }}
      />
    )
  }
}
export default class CompanyInfo extends React.PureComponent {
  look = ({ item }) => {
    console.log(item)
    let url = ''
    if (item.type === 'WEB') {
      url = item.url
    } else {
      url = item.childTitle
      if (Platform.OS === 'ios') {
        url = item.iosUrl
      }
    }
    productLook({ params: { productId: item.id } })
    Linking.openURL(url)
  }

  render() {
    // console.log(props, 'aaaa')
    const {
      company: { content: html, companyName, companyAbout, companyFinance },
      publishers = [],
      products = []
    } = this.props
    return (
      <View>
        <View style={styles.company}>
          <Text style={styles.companyName}>{companyName}</Text>
          <Text style={styles.companyinfo}>
            {companyAbout} · {companyFinance} · {companyFinance}
          </Text>
          <ScrollView scrollEnabled={false} showsHorizontalScrollIndicator={false} horizontal={true}>
            {(publishers || []).map((item, index) => {
              return (
                <View style={styles.item} key={index}>
                  <CustomImage

                    style={styles.img}
                    source={item.headImg ? { uri: item.headImg } : getUserAvatorLocalB('female')}
                  />
                  <Text style={styles.userName}>{item.username}</Text>
                  <Text style={styles.position}>{item.position}</Text>
                </View>
              )
            })}
          </ScrollView>
        </View>
        <View style={styles.bodyView}>
          {!!(products.length > 0) && <Text style={styles.subordinateTitle}>旗下产品</Text>}
          <View>
            {(products || []).map((item, index) => {
              return (
                <View style={styles.subordinate} key={index}>
                  <CustomImage
                    style={styles.productimg}
                    source={{ uri: item.icon }}
                  />
                  <View style-={styles.productBody}>
                    <Text style={styles.maxtitle} numberOfLines={1}>
                      {item.title}
                    </Text>
                    <Text style={styles.mintitle}>{item.childTitle}</Text>
                  </View>
                  <View style={styles.productright}>
                    <CustomButton
                      onPress={this.look}
                      params={{ item }}
                      style={styles.understandButton}
                    >
                      <Text style={styles.understandText}>了解</Text>
                    </CustomButton>
                    <View>
                      <Text style={styles.understandSize}>
                        {item.lookCount || 0}人了解过
                      </Text>
                    </View>
                  </View>
                </View>
              )
            })}
          </View>
          <View style={styles.htmlView}>
            <HTMLView renderNode={renderNode} value={html} />
          </View>
        </View>
      </View>
    )
  }
}

CompanyInfo.propTypes = {
  company: PropTypes.object,
  publishers: PropTypes.array,
  products: PropTypes.array
}
const styles = StyleSheet.create({
  container: {
    position: 'relative',
    backgroundColor: 'transparent'
  },
  leftBottomBtn: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    height: ScaleS(30),
    width: ScaleS(40),
    justifyContent: 'center',
    alignItems: 'center'
  },
  company: {
    marginTop: ScaleS(24),
    paddingBottom: ScaleS(20),
    borderColor: 'rgba(151, 151, 151, 0.2)',
    borderBottomWidth: ONE_PIXEL
  },
  companyName: {
    fontSize: ScaleS(18),
    fontWeight: '500',
    color: '#3C3C3C',
    marginBottom: ScaleS(16)
  },
  companyinfo: {
    marginBottom: ScaleS(35),
    color: '#CCCCCC',
    fontSize: ScaleS(14)
  },
  userName: {
    marginBottom: ScaleS(8),
    color: '#3C3C3C',
    fontSize: ScaleS(14)
  },
  img: {
    resizeMode: 'cover',
    width: ScaleS(74),
    height: ScaleS(74),
    borderRadius: ScaleS(37),
    marginBottom: ScaleS(16)
  },
  item: {
    alignItems: 'center',
    marginRight: ScaleS(26)
  },
  subordinateTitle: {
    marginTop: ScaleS(35),
    marginBottom: ScaleS(35),
    fontSize: ScaleS(18),
    color: '#3C3C3C',
    fontWeight: '500'
  },
  subordinate: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: ScaleS(27)
  },
  productright: {},
  maxtitle: {
    width: ScaleS(174),
    fontSize: ScaleS(16),
    fontWeight: '400',
    color: '#3C3C3C'
  },
  mintitle: {
    width: ScaleS(174),
    fontSize: ScaleS(13),
    marginTop: ScaleS(6),
    color: '#CCCCCC',
    fontWeight: '400'
  },
  understandButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: ScaleS(74),
    height: ScaleS(32),
    borderRadius: ScaleS(18),
    borderColor: 'rgba(236,236,236,1)',
    borderWidth: ScaleS(2)
  },
  understandText: {
    fontSize: ScaleS(14),
    color: '#3C3C3C',
    fontWeight: '500'
  },
  htmlView: {
    marginBottom: ScaleS(40)
  },
  understandSize: {
    fontSize: ScaleS(9),
    color: '#FADE25',
    fontWeight: '500',
    textAlign: 'center',
    marginTop: ScaleS(5)
  },
  productBody: {
    marginLeft: ScaleS(17)
  },
  position: {
    fontSize: ScaleS(11),
    color: '#ccc'
  },
  productimg: {
    width: ScaleS(54),
    height: ScaleS(54),
    borderRadius: ScaleS(13)
  },
  rightBottomBtn: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    height: ScaleS(30),
    width: ScaleS(40),
    justifyContent: 'center',
    alignItems: 'center'
  }
})
